<template>
  <div>
    <Header></Header>
    <section>
      <Routers></Routers>
      <div id="section" class="main">
        <div class="common_header">
          <span class="common_header_tip">研究开发组织管理水平</span>
        </div>

        <table class="common_table" cellspacing="0" cellpadding="0">
          <thead>
          <tr>
            <th></th>
            <th>研究开发组织管理水平附件</th>
            <th>上传</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item ,index) in list" :key="index">
            <td><span>{{item.id}}</span></td>
            <td><a :href="item.tpl_path" target="_blank" class="common_showpdf_text">{{item.tpl_name}}</a></td>
            <td>
              <div class="upload_box"  v-show="!item.key">
                <i class="inlineBlockIcon upload_logo"></i>
                <span>点击上传文件</span>
                <input type="file" @change="upload($event,item.id,index)">
              </div>
              <a :href="item.key" target="_blank" class="common_showpdf_text" v-if="item.key">{{item.name}}</a>
            </td>
            <td class="operation_td">
              <span v-show="!item.key">请上传文件</span>
              <span v-show="item.key" class="common_table_delBTN" @click="del_file(item.file_id)">删除</span>
            </td>
          </tr>
          </tbody>
        </table>

        <!--文字弹框 -->
        <div class="tankuang_box" v-if="tankuangISshow">
          <div class="tankuang">
            <p class="tankuangMSG">{{tankuangMSG}}</p>
            <button class="tankuang_ok_btn" @click="tankuangISshowBTN">确认</button>
          </div>
        </div>

        <!--删除确认框 -->
        <div class="tankuang_box" v-if="delISshow">
          <div class="tankuang">
            <p class="tankuangMSG">确认删除吗？</p>
            <div class="tankuang_btn_box">
              <button class="tankuang_ok_btn" @click="delBTN">确认</button>
              <button class="tankuang_ok_btn" @click="cancelDel">取消</button>
            </div>
          </div>
        </div>

      </div>
    </section>
  </div>
</template>

<script>
  import Routers from '@/template/routers.vue'
  import Header from '@/template/common_header.vue'
  export default {
    name: 'ManagementLevel',
    components: {
      Routers,
      Header
    },
    data () {
      return {
        id:null,
        list:[],
        tankuangMSG:'请点击对应的名称下载模板，更改保存为pdf文件，上传',

        /*控制*/
        boxISshow:false,
        delISshow:false,
        tankuangISshow:true,
        /***删除***/
        del_list:[]
      }
    },
    mounted: function() {
      this.axios.get('/index/research_list').then((res)=>{
        if(res.data.code==1){
          this.list = res.data.data
        }else{
          this.list = []
        }
      })
    },
    methods: {
      /*删除*/
      del (id) {
        this.del_list = []
        this.del_list.push(id)
        this.delISshow = !this.delISshow
      },
      batchDel () {
        if(this.checkList.length<=0){
          this.tankuangMSG = '没有选择任何内容'
          this.tankuangISshow = !this.tankuangISshow
        }else{
          this.delISshow = !this.delISshow
        }
      },
      delBTN () {
        if(this.del_list.length>0){
          this.axios.post('/index/del_know',{
            ids:this.del_list
          }).then((res)=>{
            if(res.data.code==1){
              this.delISshow = !this.delISshow
              this.del_list = []
              this.axios.get('/index/know_list?page='+this.current).then((res)=>{
                if(res.data.code==1){
                  this.list = res.data.data
                  this.allpage = res.data.last_page
                }else{
                  this.list = []
                }
              })
            }
          })
        }else{
          this.axios.post('/index/del_know',{
            ids:this.checkList
          }).then((res)=>{
            if(res.data.code==1){
              this.delISshow = !this.delISshow
              this.checkList = []
              this.checked = false
              this.axios.get('/index/know_list?page='+this.current).then((res)=>{
                if(res.data.code==1){
                  this.list = res.data.data
                  this.allpage = res.data.last_page
                }else{
                  this.list = []
                }
              })
            }
          })
        }
      },
      /*处理pdf文件*/
      upload (e,ID,index) {
//        console.log(this.list[index])
//        return
        let file = e.target.files[0]
        let reader = new FileReader()
        reader.readAsDataURL(file)
        let _this = this
        new Promise( (resolve, reject) => {
          reader.onload = function(e) {
            _this.axios.post('/index/upload_qiniu', {
              code: this.result
            }).then((res) => {
              if(res.data.code == 1){
                let key = res.data.key
                resolve(key);
              }else{
                Toast(res.data.msg)
                return
              }
            }).catch(function (error) {
              Toast('网络连接超时，请稍后重试！')
              return
            });
          }
        }).then(key => {
          _this.axios.post('/index/save_research',{
            id:ID,
            name:file.name,
            key:key
          }).then((res)=>{
            if(res.data.code==1){
              new Promise( (resolve, reject)=>{
                _this.axios.get('/index/research_list').then((res)=>{
                  if(res.data.code==1){
                    _this.list = res.data.data
                  }else{
                    _this.list = []
                  }
                })
              })
            }else{
              Toast(res.data.msg)
              return
            }
          }).catch(function (error) {
            Toast('网络连接超时，请稍后重试！')
            return
          });
        })
//        reader.onload = function(e) {
//          _this.axios.post('/index/upload_qiniu',{
//            code:this.result
//          }).then((res)=>{
//            if(res.data.code==1){
//              let key = res.data.key
//              _this.axios.post('/index/save_research',{
//                id:ID,
//                name:file.name,
//                key:key
//              }).then((res)=>{
//                if(res.data.code==1){
//                  location.reload()
//                }
//              })
//            }
//          })
//        }

      },
      del_file (id) {
        new Promise((resolve, reject)=>{
          this.axios.post('/index/del_research',{
            file_id:id
          }).then((res)=>{
            if(res.data.code==1){
              resolve()
            }
          })
        }).then(()=>{
          this.axios.get('/index/research_list').then((res)=>{
            if(res.data.code==1){
              this.list = res.data.data
            }else{
              this.list = []
            }
          })
        })

      },
      /*基础操作*/
      add () {
        this.boxISshow = true
        this.tankuang_title = '添加'
      },
      edit (id) {
        this.boxISshow = true
        this.tankuang_title = '编辑'
        this.axios.get('/index/show_know?id='+id).then((res)=>{
          if(res.data.code==1){
            let datas = res.data.data
            this.num = datas.know_num
            this.name = datas.know_name
            this.type = datas.know_type
            this.shouquan = datas.know_sn
            this.time = datas.know_time
            this.getType = datas.know_way
            if(datas.know_info){
              this.file_name = datas.know_info
              this.file = datas.know_file.file_key
              this.upload_ed = true
            }
            this.id = id
          }
        })
      },
      save () {
        this.axios.post('/index/save_know',{
          id:this.id||'',
          know_num:this.num,
          know_name:this.name,
          know_type:this.type,
          know_sn:this.shouquan,
          know_time:this.time,
          know_way:this.getType,
          know_info:this.file_name,
          know_file:this.file
        }).then((res)=>{
          if(res.data.code==1){
            this.axios.get('/index/know_list?page=1').then((res)=>{
              if(res.data.code==1){
                this.list = res.data.data
                this.allpage = res.data.last_page
              }else{
                this.list = []
              }
            })
            this.boxISshow = false
            this.num = ''
            this.name = ''
            this.type = ''
            this.shouquan = ''
            this.time = ''
            this.getType = ''
            this.file_name = ''
            this.file = ''
            this.upload_ed = false
            this.w = 0
            this.id = null
          }
        })
      },
      cancelSave () {
        this.boxISshow = false
        this.num = ''
        this.name = ''
        this.type = ''
        this.shouquan = ''
        this.time = ''
        this.getType = ''
        this.file_name = ''
        this.file = ''
        this.upload_ed = false
        this.w = 0
        this.id = null
      },
      closeBox () {
        this.boxISshow = false
        this.num = ''
        this.name = ''
        this.type = ''
        this.shouquan = ''
        this.time = ''
        this.getType = ''
        this.file_name = ''
        this.file = ''
        this.upload_ed = false
        this.w = 0
        this.id = null
      },
      cancelDel () {
        this.delISshow = !this.delISshow
      },
      tankuangISshowBTN() {
        this.tankuangISshow = false
      }
    }
  }
</script>

<style scoped>
  @import '../../assets/public.css';
  @import '//at.alicdn.com/t/font_749860_je5eki3tevb.css';

  .tankuang{
    width:359px;
    height:188px;
    padding:30px;
  }
  .tankuang_ok_btn{
    padding:6px 15px;
    font-size:16px;
    width:110px;
  }
  .common_table_delBTN{
    cursor: pointer;
  }
  div.upload_box{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  div.upload_box>input{
    position: absolute;
    top:0;
    left: 0;
    right:0;
    bottom:0;
    width: 100%!important;
    height:100%;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
  }
  i.upload_logo{
    width:22px;
    height:22px;
    background-image: url("../../assets/img/upload.png");
    margin-right:5px;
    box-sizing: border-box;
  }


</style>
